<template>
	<!-- 搜索框 -->
	<view class="search-back" :style="{height:buttom+'px'}">
		<!-- 胶囊按钮距离顶部的高度 -->
		<view :style="{height:top+'px'}"></view>
		<view class="search-input" :style="{height:height+'px',width:left+'px'}">
			<image src="../../static/sousuo.png" mode="widthFix"></image>
			<input :style="{height:height+'px'}" type="text" disabled placeholder="请输入">
		</view>
	</view>
	<view :style="{height:(buttom-20)+'px'}"></view>
	<!-- 轮播 -->
	<Swiper :banner="data.banner"/>
	
</template>

<script setup>
	import {onMounted,reactive,toRefs} from "vue"
	import Swiper from './component/swiper.vue'
	
	// 初始化
	// 在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。以下调用获取默认环境的数据库的引用：
	const db = wx.cloud.database()
	console.log(db)
	
	// 存储胶囊按钮数据
	let capsule_data=reactive({
		height:0,
		top:0,
		left:0,
		buttom:0
	})
	
	const {height,top,left,buttom}=toRefs(capsule_data)
	
	onMounted(()=>{
		// 获取右上角胶囊按钮的坐标数据
		const capsule=uni.getMenuButtonBoundingClientRect()
		capsule_data.height=capsule.height
		capsule_data.top=capsule.top
		capsule_data.left=(capsule.left)-30
		capsule_data.buttom=(capsule.height+capsule.top)+10
		
		getData()
	})
	
	// 存储数据库的数据
	const data=reactive({
		banner:[],//轮播数据
		seckill:[],//秒杀数据
		card:[]
	})
	
	// 请求数据的数据
	async function getData(){
		// 获取轮播数据
		const banner = await db.collection('banner').get()
		// 并发  全部成功才会成功，否则失败走catch语句
		Promise.all([banner]).then(res=>{
			data.banner=res[0].data
		}).catch(err=>{
			console.log(err)
		})
	}
	
	
</script>

<style>
page{
	background-color: #f4f4f4;
}
/* 首页自定义搜索框 */
.search-back{
	/* background-color: #4CD964; */
	background-color: #e94b37;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}
.search-input{
	background: #FFFFFF;
	border-radius: 50upx;
	margin-left: 20rpx;
	display: flex;
	flex-direction: row;
	flex: 1;
	position: relative;
}
.search-input input{
	width: 100%;
	font-size: 30upx;
	color: #b2b2b2;
	padding-left: 80upx;
}
.search-input image{
	width: 35upx;
	height: 35upx;
	position: absolute;
	left: 30upx;
	align-self: center;
}
</style>

